<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>车库信息</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <!-- 百度地图密钥 -->
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=cOR2POv5Qc5zVT2aOxToLXs8vG1wuOo6"></script>
</head>

<body>
    <div id="allmap"></div>
    <div id="container"></div>
     <ul class="drawing-panel" style="z-index: 99;">
        <li class = "btn" onclick = "openEdit()">开启线/面/圆可编辑</li>
        <li class = "btn" onclick = "closeEdit()">关闭线/面/圆可编辑</li>
    </ul> 
    
</body>

</html>
<script>
    //创立中心点
    var map = new BMapGL.Map('container');
    map.centerAndZoom(new BMapGL.Point(108.954083, 34.323146), 18);
    map.enableScrollWheelZoom(true);
    //地图弹窗
    map.addEventListener('tilesloaded', function () {
    alert('地图加载完成！');
});
    // 创建添加点标记
    var marker = new BMapGL.Marker(new BMapGL.Point(108.954083, 34.323146));
    //var marker1 = new BMapGL.Marker(new BMapGL.Point(108.953078,34.323655));
    var pt = new BMapGL.Point(108.953078, 34.323655);
    var pt2 = new BMapGL.Point(108.957012, 34.321087);
    var pt3 = new BMapGL.Point(108.952094,34.320818);
    //独立设计点的图标
    var myIcon = new BMapGL.Icon("../static/img/111.jpeg", new BMapGL.Size(40, 45));
    var myIcon1 = new BMapGL.Icon("../static/img/222.jpeg", new BMapGL.Size(50, 45));
    var myIcon2 = new BMapGL.Icon("../static/img/333.jpeg", new BMapGL.Size(50, 45));
    var marker1 = new BMapGL.Marker(pt, { icon: myIcon });
    var marker2 = new BMapGL.Marker(pt2, { icon: myIcon1 });
    var marker3 = new BMapGL.Marker(pt3, { icon: myIcon2 });
    //把点加入到地图里面
    map.addOverlay(marker);
    map.addOverlay(marker1);
    map.addOverlay(marker2);
    map.addOverlay(marker3);
    // 创建图文信息窗口
    var sContent = `<h4 style='margin:0 0 5px 0;'>我得位置</h4>
    <img style='lift:right;margin:0 4px 22px' id='imgDemo' src='../static/img/44.jpg' width='130' height='80'/>
    <p style='margin:0;line-height:2.5;font-size:15px;text-indent:2em'>
    </p>`;
    var sContent1 = `<h4 style='margin:0 0 5px 0;'>车库1</h4>
    <img style='float:lift;margin:0 4px 22px' id='imgDemo1' src='../static/img/111.jpeg' width='130' height='80'/>
    <p style='margin:0;line-height:2.5;font-size:15px;text-indent:2em'>
   <a href="http://localhost:8081/#/user/zt_Stall">车库1</a>
    </p>`;
    var sContent2 = `<h4 style='margin:0 0 5px 0;'>车库2</h4>
    <img style='float:lift;margin:0 4px 22px' id='imgDemo2' src='../static/img/222.jpeg' width='139' height='104'/>
    <p style='margin:0;line-height:1.5;font-size:15px;text-indent:2em'>
   <a href="index3.html">车库2</a>
    </p>`;
    var sContent3 = `<h4 style='margin:0 0 5px 0;'>车库3</h4>
    <img style='float:lift;margin:0 4px 22px' id='imgDemo3' src='../static/img/333.jpeg' width='139' height='104'/>
    <p style='margin:0;line-height:1.5;font-size:15px;text-indent:2em'>
   <a href="index2.html">车库3</a>
    </p>`;
    var infoWindow = new BMapGL.InfoWindow(sContent);
    var infoWindow1 = new BMapGL.InfoWindow(sContent1);
    var infoWindow2 = new BMapGL.InfoWindow(sContent2);
    var infoWindow3 = new BMapGL.InfoWindow(sContent3);
    // marker添加点击事件
    marker.addEventListener('click', function () {
        this.openInfoWindow(infoWindow);
        // 图片加载完毕重绘infoWindow
        document.getElementById('imgDemo').onload = function () {
            infoWindow.redraw();
        };
    });
    marker1.addEventListener('click', function () {
        this.openInfoWindow(infoWindow1);
        // 图片加载完毕重绘infoWindow
        document.getElementById('imgDemo1').onload1 = function () {
            infoWindow1.redraw();
        };
    });
    marker2.addEventListener('click', function () {
        this.openInfoWindow(infoWindow2);
        // 图片加载完毕重绘infoWindow
        document.getElementById('imgDemo2').onload2 = function () {
            infoWindow2.redraw();
        };
    });
    marker3.addEventListener('click', function () {
        this.openInfoWindow(infoWindow3);
        // 图片加载完毕重绘infoWindow
        document.getElementById('imgDemo3').onload3 = function () {
            infoWindow3.redraw();
        };
    });
    //圆的绘制
    var circle = new BMapGL.Circle(new BMapGL.Point(108.954083, 34.323146), 500, {
        strokeColor: 'blue',
        strokeWeight: 2,
        strokeOpacity: 0.5
    });
    map.addOverlay(circle);
    //地图圆的拉扯
    function openEdit() {

        circle.enableEditing();
    }
    function closeEdit() {
        circle.disableEditing();
    }

    // var map = new BMapGL.Map('container');
    //     map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
        // var cr = new BMapGL.CopyrightControl({
        //     anchor: BMAP_ANCHOR_TOP_RIGHT,
        //     offset: new BMapGL.Size(20, 20)
        // });   //设置版权控件位置
	    // map.addControl(cr); //添加版权控件
        // var bs = map.getBounds();   //返回地图可视区域
	    // cr.addCopyright({
        //     id: 1, 
        //     content: "<img src='../img/1.jpg' width='50px' height='50px'/><a href='http://localhost:8080/#/mess' style='font-size:16px;color:#000'>个人订单信息</a>", 
        //     bounds: bs
        // });
        // // map.setCopyrightOffset();



</script>
<style>
     html,body{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
    #container {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }

    ul li {
        list-style: none;
    }

    .drawing-panel {
        z-index: 999;
        position: fixed;
        bottom: 3.5rem;
        margin-left: 3rem;
        padding: 1rem 1rem;
        border-radius: .25rem;
        background-color: #fff;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }

    .btn {
        width: 150px;
        height: 30px;
        float: left;
        background-color: #fff;
        color: rgba(27, 142, 236, 1);
        font-size: 14px;
        border: 1px solid rgba(27, 142, 236, 1);
        border-radius: 5px;
        margin: 0 5px;
        text-align: center;
        line-height: 30px;
    }
</style>